<template>
	<view class="pages">
		<view class="title">欢迎注册</view>
		<view class="input-content" style="margin-top: 40rpx;">
			<image src="../../static/login/phone.png" class="input-img"></image>
			<input placeholder="请输入手机号" type="tel" placeholder-class="placeholder" v-model="phone" />
		</view>
		<view class="input-content">
			<image src="../../static/login/password.png" class="input-img"></image>
			<input placeholder="请输入验证码" placeholder-class="placeholder" v-model="msgCode" />
			<view class="code" @tap="getCode">{{text}}</view>
		</view>
		<view class="input-content">
			<image src="../../static/login/password.png" class="input-img"></image>
			<input placeholder="请输入密码" placeholder-class="placeholder" v-model="password" />
		</view>
		<view class="input-content">
			<image src="../../static/login/password.png" class="input-img"></image>
			<input placeholder="请输入支付密码" placeholder-class="placeholder" v-model="tradePassword" />
		</view>
		<view class="input-content">
			<image src="../../static/login/code.png" class="input-img"></image>
			<input placeholder="请输入邀请码(选填)" placeholder-class="placeholder" v-model="invitationCode" />
		</view>
		<view class="login" @tap="submitLogin">注册</view>
		<view class="tips" @tap="download">已注册，直接下载登录</view>
	</view>
</template>

<script>
	import {
		register,
		sendMsg,
		appVersionInfo
	} from '../../api/api.js'
	import md5 from '@/common/hex_md.js'
	export default {
		data() {
			return {
				text: '获取验证码',
				msgCode: '', // 验证码
				phone: '', // 手机号
				password: '', // 密码
				tradePassword: '', // 交易密码
				appInfo: '',
				invitationCode: ''
			}
		},
		onShow() {
			this.invitationCode = this.getQueryString(window.location.href).code
			console.log(this.invitationCode)
			var ua = navigator.userAgent.toLowerCase();
			var isWeixin = ua.indexOf('micromessenger') != -1;
			if (isWeixin) {
				uni.showModal({
					title: '提示',
					content: '请点击右上角，选择其他浏览器打开',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
			this.os = uni.getSystemInfoSync().osName
			console.log(this.os)
			// 获取app下载地址信息
			this.getAppInfo()
		},
		methods: {
			getAppInfo() {
				let data = {
					businessType: 0,
					type: this.os == 'ios' ? 1 : 0
				}
				appVersionInfo(data).then(res => {
					this.appInfo = res.data
				})
			},

			// 发送验证码
			getCode() {
				// 判断手机号是否正确
				if ((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					//正确-发送验证码，变化 codeText 文字
					let data = {
						phone: this.phone,
						type: 0,
						timestamp: new Date().getTime(),
						authKey: md5.hex_md5(new Date().getTime() + 'toumikuailegou2025')
					}
					sendMsg(data).then(res => {
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						});
						var seconds = 60;
						this.text = seconds + 's';
						let interval = setInterval(() => {
							if (seconds > 0) {
								seconds--;
								this.text = seconds + 's'
							} else {
								this.text = '重新获取';
								clearInterval(interval)
							}
						}, 1000)
					})
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: "none"
					});
				}
			},

			// 提交注册
			submitLogin() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					});
					return
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
					uni.showToast({
						title: '请输入正确的手机号',
						icon: "none"
					});
					return
				}
				if (!this.msgCode) {
					uni.showToast({
						title: '请输入验证码',
						icon: "none"
					});
					return
				}
				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: "none"
					});
					return
				}
				if (!this.tradePassword) {
					uni.showToast({
						title: '请输入交易密码',
						icon: "none"
					});
					return
				}
				let data = {
					phone: this.phone,
					msgCode: this.msgCode,
					password: this.password,
					tradePassword: this.tradePassword,
					invitationCode: this.invitationCode
				}
				register(data).then(res => {
					console.log(res)
					uni.showToast({
						title: '注册成功',
						icon: 'none'
					})
					var that = this
					setTimeout(function() {
						if (that.os == 'ios') {
							uni.showToast({
								title: '暂不支持ios下载',
								icon: 'none'
							})
						} else {
							window.location.href = that.appInfo.connectAddress
						}
					}, 500)

				})
			},

			// 下载
			download() {
				if (this.os == 'ios') {
					uni.showToast({
						title: '暂不支持ios下载',
						icon: 'none'
					})
				} else {
					window.location.href = this.appInfo.connectAddress
				}
			}
		}
	}
</script>

<style lang="less">
	.pages {
		.title {
			margin: 200rpx 0 0 60rpx;
			font-size: 56rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 78rpx;
			letter-spacing: 2rpx;
		}

		.titles {
			margin: 12rpx 0 80rpx 60rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;

			span {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1A1A1A;
			}
		}

		.input-content {
			margin-left: 60rpx;
			margin-bottom: 32rpx;
			padding-left: 92rpx;
			position: relative;
			width: 538rpx;
			height: 90rpx;
			background: #F4F8FF;

			.code {
				position: absolute;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FE3B33;
				top: 27rpx;
				right: 24rpx;
			}

			.input-img {
				width: 44rpx;
				height: 44rpx;
				top: 23rpx;
				left: 24rpx;
				position: absolute;
			}

			input {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1A1A1A;
			}

			.placeholder {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
		}

		.login {
			text-align: center;
			margin: 80rpx 0 0 60rpx;
			width: 630rpx;
			height: 90rpx;
			background: #FE3B33;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.16);
			border-radius: 4rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 90rpx;
		}

		.tips {
			margin-top: 60rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			text-align: center;
			width: 750rpx;
		}
	}
</style>